﻿@model SMECustomerWebsite.Models.ViewModels.SalePerformance.DepositViewModel
@Html.Action("SubMenuKpi", "System")
<div class="row">
    <div class="col-md-12">
        <div class="x_panel">
            <div class="x_title">
                @if (@Model.DaoInfo.Dao != "khong co DAO")
                {
                    <h2>@SMECustomerWebsite.Core.Resources.Resource.SalePerformanceTitle @Model.DaoInfo.FullName <a data-toggle="modal" data-target=".sp-dao-info" style="font-size:14px;"> <i class="fa fa-info-circle"></i> </a></h2>
                }
                else
                {
                    <h2>@SMECustomerWebsite.Core.Resources.Resource.NotChooseMsboSalePerformance</h2>
                }

                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="row">
                    <div class="col-md-5 col-sm-5 col-xs-12">
                        <table id="cd-pd-product-holding" class="table table-bordered table-striped jambo_table custom_table">
                            <thead class="headings">
                                <tr>
                                    <th class="column-title smes_sp_col_header">R2</th>
                                    <th class="column-title smes_sp_col_header">ĐIỂM THỰC HIỆN</th>
                                    <th class="column-title smes_sp_col_header">XẾP LOẠI</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td scope="row">SEP-15</td>
                                    <td>79%</td>
                                    <td>Không hoàn thành</td>
                                </tr>
                                <tr>
                                    <td scope="row">Cumulated 9 months</td>
                                    <td>88%</td>
                                    <td>Cần cố gắng</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-12">
                    </div>
                    <div class="col-md-5 col-sm-5 col-xs-12">
                        <table class="table table-bordered custom_table">
                            <tbody>
                                <tr>
                                    <td scope="row" class="smes_sp_col_header">THANG ĐIỂM</td>
                                    <td>>=120%</td>
                                    <td>>=105%</td>
                                    <td>>=95%</td>
                                    <td>>=80%</td>
                                    <td>&lt;80%</td>
                                </tr>
                                <tr>
                                    <td scope="row" class="smes_sp_col_header" rowspan="2">XẾP LOẠI</td>
                                    <td>Xuất sắc</td>
                                    <td>Hoàn thành tốt</td>
                                    <td>Hoàn thành</td>
                                    <td>Cần cố gắng</td>
                                    <td>Ko hoàn thành</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <table id="sp-deposit" class="table table-bordered table-striped jambo_table custom_table" style="width:100% !important">
                    <thead class="headings">
                        <tr>
                            <th class="column-title" rowspan="2">Nhóm chỉ tiêu</th>
                            <th class="column-title" rowspan="2">STT</th>
                            <th class="column-title" rowspan="2">Tên chỉ tiêu</th>
                            <th class="column-title" rowspan="2">Đơn vị đo</th>
                            <th class="column-title" rowspan="2">Trọng số (%)</th>
                            <th class="column-title" colspan="3">KH cả năm</th>
                            <th class="column-title" colspan="3">KH 6 tháng đầu năm</th>
                            <th class="column-title" colspan="6">Theo dõi KQ</th>
                        </tr>
                        <tr>
                            <th class="column-title">Ngưỡng</th>
                            <th class="column-title">Cơ bản</th>
                            <th class="column-title">Đẩy mạnh</th>
                            <th class="column-title">Ngưỡng</th>
                            <th class="column-title">Cơ bản</th>
                            <th class="column-title">Đẩy mạnh</th>
                            <th class="column-title">KH tháng @DateTime.Now.Month</th>
                            <th class="column-title">KQ tháng @DateTime.Now.Month</th>
                            <th class="column-title">% tháng @DateTime.Now.Month</th>
                            <th class="column-title">% lũy kế đến tháng @DateTime.Now.Month</th>
                            <th class="column-title">% 6 tháng đầu năm</th>
                            <th class="column-title">% KH năm</th>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="~/Scripts/tableeditable/dataTables.rowsGroup.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#sp-deposit').DataTable({
                bFilter: false,
                bInfo: false,
                bPaginate: false,
                "responsive": true,
                "bAutoWidth": true,
                "order": [[0, 'asc']],
                "bServerSide": true,
                rowsGroup: [0, 5],
                //"bProcessing": true,
                "sAjaxSource": '@Url.Action("KPIRegionData", "SalePerformance")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                //"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "aoColumns": [
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false }],
                "aoColumnDefs": [{
                    "aTargets": [13],
                    "mRender": function (data, type, full) {
                        return full[13] + '%';
                    }
                },{
                    "aTargets": [14],
                    "mRender": function (data, type, full) {
                        return full[14] + '%';
                    }
                },{
                    "aTargets": [15],
                    "mRender": function (data, type, full) {
                        return full[15] + '%';
                    }
                },{
                    "aTargets": [16],
                    "mRender": function (data, type, full) {
                        return full[16] + '%';
                    }
                }],
                "drawCallback": function (settings) {
                    $('table.custom_table th').removeClass().addClass('column-title');
                }
            });

        });
    </script>
}